<template>
  <div class="content">
    <el-row>
      <el-col :span="6"></el-col>
      <el-col :span="12">
        <div class="signup-content">
          <div class="signup-content-left">
            <h2>欢迎使用</h2>
            <h1>
              东北林业大学信息学院
              <br />
              实验室预约系统
            </h1>
          </div>
          <div class="signup-content-right">
            <div class="signup-form">
              <span class="signup-form-title">登录：</span>
              <br />
              <br />
              <span class="signup-form-tip">让实验室预约变的更简单</span>
              <br />
              <br />
              <el-input
                placeholder="请输入用户名"
                prefix-icon="el-icon-user-solid"
                v-model="userRef.userName"
              ></el-input>
              <br />
              <br />
              <el-input
                placeholder="请输入密码"
                prefix-icon="el-icon-key"
                v-model="userRef.password"
                show-password
              ></el-input>
              <br />
              <br />
              <el-button type="primary" class="login-btn" @click="login">
                立即登录
              </el-button>
            </div>
          </div>
        </div>
        <div class="signup-footer">
          <div class="pull-left">
            Copyright © 2018级软件工程3班陈一鸣
            <br />
          </div>
        </div>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { User } from "@/datasource/Type";
import { State } from "@/store";
import { useStore } from "vuex";
import { LOGIN } from "@/store/VuexTypes";

export default defineComponent({
  setup() {
    let user: User = {
      userName: "",
      password: "",
    };
    const store = useStore<State>();
    let userRef = ref<User>(user);
    const login = () => {
      store.dispatch(LOGIN, {
        userName: userRef.value.userName,
        password: userRef.value.password,
      });
    };
    return { userRef, login };
  },
});
</script>

<style scoped>
.content {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: url(../../assets/login_img.jpg) no-repeat fixed top;
  background-size: 100% 100%;
}
.signup-content {
  padding-top: 20%;
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: space-between;
}
.signup-content-left {
  padding-top: 40px;
  color: white;
}
.signup-content-left h1 {
  padding-top: 10px;
}
.signup-content-left h2 {
  padding-left: 100px;
  font-weight: 600;
  padding-bottom: 30px;
}
.signup-form {
  width: 300px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  border: 1px solid white;
  padding: 20px;
}
.signup-form-title {
  color: white;
  font-size: 15px;
  font-weight: 600;
}
.signup-form-tip {
  color: white;
  font-size: 13px;
  font-weight: 300;
}
.signup-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  padding-top: 10px;
}
.pull-left {
  font-size: 10px;
  color: white;
}
.login-btn {
  margin: 0 auto im !important;
  width: 260px;
  height: 20px;
}
</style>
